<template>
  <div class="page">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <h4>重点工作两次及以上红灯预警统计</h4>
      </div>
      <el-row :gutter="20">
        <el-col>
          <div>
            <div class="tableStyle">
              <div class="selectData search">
                <span style="margin-left:20px;margin-right:6px;font-size:14px;"
                  >重点工作:</span
                >
                <el-cascader
                  ref="taskRef"
                  class="userIntSize"
                  v-model="taskId"
                  :options="taskLists"
                  :props="taskProp"
                  size="small"
                  :show-all-levels="false"
                  @change="getTaskId"
                >
                </el-cascader>
              </div>
              <div id="YmyChartSpeedTow"></div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import logInfoVue from "../../systemAdm/logInfo.vue";

export default {
  data() {
    return {
      taskId: 17,
      taskLists: [],
      taskProp: {
        label: "name",
        value: "id",
        children: "children"
      },
      quarter: "",
      quarterList: [
        { id: 1, name: "第一季度" },
        { id: 2, name: "第二季度" },
        { id: 3, name: "第三季度" },
        { id: 4, name: "第四季度" }
      ],
      tableData: []
    };
  },
  mounted() {
    this.dataAnalysis();
    this.getTaskList();
  },
  methods: {
    // 时刻获取十项重点工作
    getTaskId(val) {
      if (val) {
        this.taskId = this.$refs["taskRef"].getCheckedNodes()[0].value;
        let _val = val;
        console.log(_val);
        if (!Array.isArray(_val)) {
          _val = [_val];
        }
        this.taskId = _val[_val.length - 1];
        this.dataAnalysis()
      }
    },
    // 获取十项重点工作
    getTaskList() {
      this.$axios
        .post("/task/getList")
        .then(res => {
          res.data.map(item => {
            if (item.children.length == 0) {
              item.children = undefined;
            }
            this.taskLists = res.data;
          });
        })
        .catch(err => {});
    },
    operationData(val) {
      let _data = val * 100;
      _data = Math.round(_data);
      // _data = _data.toString();
      // _data = parseInt(_data.substring(0, _data.indexOf(".")));
      // alert(ab_num);
      return _data;
    },
    dataAnalysis() {
      this.$axios
        .post(`/distribution/LampProportionNew`,{
          taskId:this.taskId
        })
        .then(res => {
          if (res.code == 200) {
            let _data = res.data;
            console.log(_data,999)
            if( _data.length != 0 ){
               this.tableData = [];
              _data.forEach((item, index) => {
                item.red = this.operationData(item.red);
                this.tableData.push({
                  product: item.targetName,
                  红灯: item.red
                });
              });
            }else{
              this.tableData = [];
            }
            
            this.applyData();
          }
        })
        .catch(err => {
          console.log(err);
        });

      return;
    },
    applyData() {
      var YmyChartSpeed = this.$echarts.init(
        document.getElementById("YmyChartSpeedTow")
      );
      YmyChartSpeed.setOption({
        grid: {
          left: "10%",
          bottom: "20%"
        },
        legend: {},
        color: ["#F14F54", "#FAF754"],
        tooltip: {
          trigger: "axis",
          position: function(pt) {
            return [pt[0], "10%"];
          }
        },
        dataset: {
          dimensions: ["product", "红灯"],
          source: this.tableData
        },
        xAxis: [
          {
            type: "category",
            //data: ['2015-2016', '2016-2017', '2017-2018', '2018-2019']
            axisLabel: {
              interval: 0, //强制文字产生间隔
              rotate: 45, //文字逆时针旋转45°
              textStyle: {
                //文字样式
                color: "black",
                fontSize: 12,
                fontFamily: "Microsoft YaHei"
              }
              // formatter: function(value) {
              //   return value.split("").join("\n");
              // }
            }
          }
        ],
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
            interval: "auto",
            formatter: "{value} 次"
          },
          show: true
        },
        series: [
          { type: "bar", barWidth: 20 }
          // { type: "bar", barWidth: 15 }
        ]
      });
    },
    headerdataStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex == 1) {
        return { display: "none" };
      }
    }
  }
};
</script>

<style lang="less" scoped>
.page {
  width: 100%;
  height: auto;
  > div {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
  }
}
.tableStyle {
  width: 100%;
  height: auto;
  padding-top: 40px;
  > div {
    width: 100%;
    height: 540px;
    margin-bottom: 20px;
  }
  > .selectData {
    display: flex;
    justify-content: center;
    align-items: center;
     height: 40px;
    margin-bottom: 20px;
  }
  > p.center {
    width: 100%;
    height: 20px;
    line-height: 20px;
    color: #000;
    text-align: center;
  }
}
.userIntSize {
  // width: 30% ;
}

.focus {
  // width: 100%;
  height: 100px;
  margin: 0 auto;
  margin-top: 40px;
  margin-bottom: 10px;
  > li {
    float: left;
    margin-left: 20px;
    width: 240px;
    height: 100px;
    border-radius: 4px;
    > span {
      float: left;
      width: 160px;
      height: 100%;
      > i {
        display: inline-block;
        font-size: 12px;
        color: #fff;
        font-style: normal;
        margin-top: 26px;
        margin-left: 30px;
      }
      > b {
        display: block;
        font-size: 16px;
        color: #fff;
        margin-top: 10px;
        margin-left: 30px;
      }
    }
    > p {
      float: right;
      width: 50px;
      height: 50px;
      background: url("../../../assets/img/1p.png") no-repeat;
      background-size: 100% 100%;
      margin-right: 30px;
      margin-top: 20px;
    }
  }
  .both {
    > span {
      > i {
        display: inline-block;
        font-size: 12px;
        color: #fff;
        font-style: normal;
        > em {
          display: inline-block;
          font-style: normal;
          font-size: 16px;
          font-weight: 600;
          margin-left: 4px;
        }
      }
    }
  }
}
.selectData {
  display: flex;
  justify-content: center;
  align-items: center;
}
.coor1 {
  background: #11cdef;
}
.coor2 {
  background: #ffd64a;
}
.coor3 {
  background: #2cce89;
}
.coor4 {
  background: #f5365b;
}
</style>
